<template>
  <view class="em-header-wrap" :style="[{'box-shadow': styles.wrap['box-shadow']}]">
    <view class="em-header-bg-wrap" :style="[{'opacity': styles.wrap['opacity']}]">
      <view class="em-header-bg" :style="[{'background-color': styles.wrap['background-color']}]"></view>
    </view>
    <view class="em-header" :style="[{'padding-top': styles.wrap['padding-top'], 'padding-bottom': styles.wrap['padding-bottom']}]">
      <view class="em-header-content" :style="[styles.content]">
        <view style="display:flex;flex-direction: column;align-items: center;">
			<template>
				<slot name="center"></slot>
			</template>     
        	<view class="em-header-item" style="">
        		<em-icon v-if="titleIcon" style="margin-right: 5px;" class="em-header-btn-icon" :unicode="titleIcon" :style="[styles.title]"></em-icon>
        		<view >
        			<text class="em-header-title" :style="[styles.title]">{{title}}</text>		  				 
        		</view>		 
        	</view>
        	<!-- <view style="height: 22px;">
        	    <view >
        	       <text v-if="description" class="em-header-description" :style="[styles.description]">{{description}}</text>
        	       <template>
        	       	<slot name="description"></slot>
        	       </template>     	        					 
        	    </view>    				  
        	</view>	 -->	  
        </view>
        <view class="em-header-left">
          <view class="em-header-btn em-header-left-btn" v-for="(x, xi) in leftBtns" :key="xi" :class="[x.name]" :ref="x.name" :style="[x.styles.btn]" @click="clickBtn('left', xi)">
			  <view  v-if="x.type == 'message' && unreadchat">
			  	<em-waver-avatar  :src="config.imgUrl + unreadchat.avatar"></em-waver-avatar>
			  </view>
            <em-icon v-else class="em-header-btn-icon" :unicode="x.iconUnicode" :style="[x.styles.icon]"></em-icon>
          </view>
          <slot name="left"></slot>
          <!-- #ifdef MP-WEIXIN -->
          <view class="em-header-btn em-header-left-btn" v-for="(x, xi) in rightBtns" :key="xi" :class="[x.name]" :ref="x.name" :style="[x.styles.btn]" @click="clickBtn('right', xi)">
			<view v-if="x.type == 'message'">
				<image class="em-header-btn-icon" src="/common/logo.png"></image>
			</view>
            <em-icon v-else class="em-header-btn-icon" :unicode="x.iconUnicode" :style="[x.styles.icon]"></em-icon>
          </view>
          <slot name="right"></slot>
          <!-- #endif -->
        </view>
        <view class="em-header-right">
          <!-- #ifndef MP-WEIXIN -->
          <view class="em-header-btn em-header-right-btn" v-for="(x, xi) in rightBtns" :key="xi" :class="[x.name]" :ref="x.name" :style="[x.styles.btn]" @click="clickBtn('right', xi)">
            <em-icon class="em-header-btn-icon" :unicode="x.iconUnicode" :style="[x.styles.icon]"></em-icon>
          </view>
          <slot name="right"></slot>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	
	import {
	  mapState
	} from 'vuex'
	
	let app = {}
	// #ifdef MP-WEIXIN || MP-KUAISHOU
	app = getApp({ allowDefault: true}).$vm
	// #endif
	// #ifdef APP-PLUS || H5
	app = getApp({allowDefault: true})
	// #endif
	
  const systemInfo = (function getSystemInfo() {
    let systemInfo = uni.getSystemInfoSync()

    let headerStyle = {}
    headerStyle.height = 36
    headerStyle.paddingTop = 8
    headerStyle.paddingBottom = 8
    // #ifdef APP-PLUS
    headerStyle.paddingTop = systemInfo.statusBarHeight ? systemInfo.statusBarHeight + 4 : headerStyle.paddingTop
    // #endif
    // #ifdef MP-WEIXIN || MP-KUAISHOU
    var menuButtonBoundingClientRect = uni.getMenuButtonBoundingClientRect()
    headerStyle.height = menuButtonBoundingClientRect.height
    headerStyle.paddingTop = menuButtonBoundingClientRect.top
    // #endif
    systemInfo.headerStyle = headerStyle

    return systemInfo
  })()

  export default {
    name: 'em-header',
    props: {
      emStyles: {
        type: Object,
        default: () => {
          return {}
        }
      },
      leftBtns: {
        type: Array,
        default: () => []
      },
      rightBtns: {
        type: Array,
        default: () => []
      },
      title: String,
	  titleIcon:String
    },
    data() {
      return {
        styles: {
          wrap: {
            'background-color': 'rgba(0,0,0,0)', // old:先暂时不给初始值，因为在微信小程序端会触发背景色过渡效果，new:不给值在微信小程序没有默认值会无法切换主题，所以给个透明值
            'opacity': '1',
            'box-shadow': '0 0 2px #F5F5F5',
            'padding-top': `${systemInfo.headerStyle.paddingTop}px`,
            'padding-bottom': `${systemInfo.headerStyle.paddingBottom}px`
          },
          content: {
            'height': `${systemInfo.headerStyle.height}px`
          },
          title: {
            'color': '#292929',
            'opacity': '1'
          }
        }
      }
    },
    watch: {
      emStyles: {
        handler(val) {
          Object.keys(this.styles).forEach(key => {
            var style = this.styles[key]
            var emStyle = this.emStyles[key]
            if (emStyle && typeof emStyle === 'object') {
              this.styles[key] = Object.assign(style, emStyle)
            }
          })
        },
        immediate: true,
        deep: true
      }
    },
	computed: {
	  ...mapState(['chatList','config']),
	  unreadchat(){
	  		return this.chatList.find(item => item.num > 0)  
	  },
	},
    methods: {
      clickBtn(position, index) {
        this.$emit('clickBtn', {
          position,
          index
        })
      }
    }
  }
</script>

<style>
  .em-header-wrap {
    position: relative;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* 当前元素为overflow: hidden;时在iOS上，外层或同级元素如果是overflow: scroll;切换页面再回到页面，未显示的滚动区域的内容或暂时被高层的内容遮挡会出现被隐藏的情况 */
    /* 这里的阴影样式就会被遮掉一部分 */
    /* overflow: hidden; */
  }

  .em-header {
    /* 在nvue中z-index不起作用，但是position: sticky;层级要比absolute高些，所以这里用这个 */
    /* position: sticky;在nvue中会透过swiper */
    /* position: sticky; */
    /* position: relative;
    z-index: 999;
    top: 0;
    right: 0;
    left: 0; */
    padding-top: 6px;
    padding-right: 18px;
    padding-bottom: 6px;
    padding-left: 18px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* 当前元素为overflow: hidden;时在iOS上，外层或同级元素如果是overflow: scroll;切换页面再回到页面，未显示的滚动区域的内容或暂时被高层的内容遮挡会出现被隐藏的情况 */
    /* overflow: hidden; */
  }

  .em-header-bg-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition-property: opacity;
    transition-duration: 0.25s;
  }

  .em-header-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 这样设置border-radius，会导致iOS nvue opacity失效，又是个离谱的坑，把opacity放到外层去吧，不能放一起 */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    /* transition-property: background-color;transition-duration: 0.25s;不能与box-shadow一起使用，否则box-shadow在安卓nvue无法切换样式，比如动态切换颜色 */
    transition-property: background-color;
    transition-duration: 0.25s;
  }

  .em-header-content {
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 36px;
  }

  .em-header-title {
    flex: 1;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
  }

  .em-header-left {
    position: absolute;
    left: 0;
    z-index: 10;
    flex-direction: row;
    flex: 1;
    justify-content: flex-start;
    align-items: center;
  }

  .em-header-right {
    position: absolute;
    right: 0;
    z-index: 10;
    flex-direction: row;
    flex: 1;
    justify-content: flex-end;
    align-items: center;
  }

  .em-header-btn {
    position: relative;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    /* 当前元素为overflow: hidden;时在iOS上，外层或同级元素如果是overflow: scroll;切换页面再回到页面，未显示的滚动区域的内容或暂时被高层的内容遮挡会出现被隐藏的情况 */
    /* overflow: hidden; */
  }

  .em-header-left-btn {
    margin-right: 16px;
    /* background-color: #F76842; */
    transition-property: background-color;
    transition-duration: 0.25s;
  }

  .em-header-right-btn {
    margin-left: 16px;
    /* background-color: #393939; */
    transition-property: background-color;
    transition-duration: 0.25s;
  }

  .em-header-btn-icon {
    display: flex;
    align-items: center;
    font-size: 17px;
    color: #FFFFFF;
  }
  .em-header-item{
  	  display: flex;
  	  flex-direction: row;
  	  align-items: center;
  	  justify-content: center;
  }
</style>
